<template>
  <!-- 起吊位 -->
  <div
    class="radar-point"
    :style="{
      left: `${point.frX * scaleX + width / 2}px`,
      top: `${height / 2 - point.frY * scaleY}px`,
      backgroundColor: point.orderStatus !== '2' ? '#f00' : getColor(point.orderType),
      // border: point.orderStatus !== '2' ? '2px solid #f00' : 'none',
    }"
    v-show="point.orderStatus !== '13'"
    @click="handlePointClick(point.orderNo)"
    @mousedown="handleMouseDown"
  >
    <span
      class="point-label"
      :style="{
        left: getLabelLeft1(point.pos2),
        top: getLabelTop1(point.pos1),
        // transform: transform,
        backgroundColor: point.orderStatus !== '2' ? '#f00' : getColor(point.orderType),
      }"
      @dblclick="handlePointDblClick(point.orderNo, point.orderStatus)"
      v-show="point.isShow_label"
    >
      {{ point.frPos }}
    </span>
  </div>
  <!-- 卸下位 -->
  <div
    class="radar-point"
    :style="{
      left: `${point.toX * scaleX + width / 2}px`,
      top: `${height / 2 - point.toY * scaleY}px`,
      backgroundColor: getColor(point.orderType),
      border: point.orderStatus === '13' ? '2px solid #f00' : 'none',
    }"
    v-if="point.orderStatus === '13'"
  >
    <span
      class="point-label"
      :style="{
        left: getLabelLeft1(point.pos2),
        top: getLabelTop1(point.pos1),
        backgroundColor: getColor(point.orderType),
        zIndex: 10 /* 确保标签在前 */,
      }"
    >
      {{ point.toPos }}
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, computed } from 'vue';
import { useQuasar } from 'quasar';

import { emitter } from 'src/emitter';
import { getColor, getLabelLeft1, getLabelTop1 } from './utils';
import { orderOperate } from '../api';
import { OrderRow } from './model';

export default defineComponent({
  name: 'terminal-crane-radar-chart-point',
  props: {
    point: {
      type: Object as PropType<OrderRow>,
      required: true,
    },
    scaleX: {
      type: Number,
      required: true,
    },
    scaleY: {
      type: Number,
      required: true,
    },
    width: {
      type: Number,
      required: true,
    },
    height: {
      type: Number,
      required: true,
    },
    craneNo: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const $q = useQuasar();

    const isClick = ref(true);
    const timer = ref<any>(null); // 用于控制双击不触发单击的定时器
    const longPressTimer = ref<any>(null);

    const transform = computed(() => {
      // '卸货',  '收料', '倒垛', ''
      switch (props.point.orderType) {
        case '上料':
          return 'translate(-50%,-150%)';
        case '发货':
          return 'translate(-50%,120%)';
        case '退料':
          return 'translate(50%,-50%)';
        default:
          return 'translate(-50%,-50%)';
      }
    });

    const handlePointClick = (orderNo: string) => {
      clearTimeout(timer.value);
      clearTimeout(longPressTimer.value);
      if (isClick.value) {
        timer.value = setTimeout(() => {
          emitter.emit('inform', { name: 'terminal-task-detail', value: { orderNo: orderNo, isOpen: true } });
        }, 300);
      } else {
        isClick.value = true;
      }
    };

    const handlePointDblClick = (orderNo: string, orderStatus: string) => {
      clearTimeout(timer.value);
      if (orderStatus !== '11' && orderStatus !== '2') {
        return $q.notify({ message: `当前指令状态${orderStatus},不可选中和取消选中`, timeout: 3000, type: 'negative' });
      }
      // 只有11可以取消
      // 只有2可以选中
      if (orderStatus === '2') {
        $q.dialog({
          title: '确认',
          message: `确定要选中指令${orderNo}吗？`,
          cancel: {
            label: '取消',
            flat: true,
            color: 'white',
          },
          ok: {
            label: '确认',
            flat: true,
            color: 'white',
          },
          persistent: true,
          style: {
            backgroundImage: "url('src/assets/terminal/popup_bg.png')",
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundColor: 'transparent',
            color: '#fff',
            padding: '50px',
            fontFamily: 'AlibabaPuHuiTi, sans-serif',
          },
        }).onOk(async () => {
          const params = {
            craneNo: props.craneNo,
            orderNo: orderNo,
            operType: '3',
            currentPos: '',
          };
          orderOperate(params).then(() => {
            $q.notify({ message: '选中操作成功', timeout: 3000 });
          });
        });
      } else {
        $q.dialog({
          title: '确认',
          message: `确定要取消选中指令${orderNo}吗？`,
          cancel: {
            label: '取消',
            flat: true,
            color: 'white',
          },
          ok: {
            label: '确认',
            flat: true,
            color: 'white',
          },
          persistent: true,
          style: {
            backgroundImage: "url('src/assets/terminal/popup_bg.png')",
            backgroundSize: 'contain',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: 'center',
            backgroundColor: 'transparent',
            color: '#fff',
            padding: '50px',
            fontFamily: 'AlibabaPuHuiTi, sans-serif',
          },
        }).onOk(async () => {
          const params = {
            craneNo: props.craneNo,
            orderNo: orderNo,
            operType: '4',
            currentPos: '',
          };
          orderOperate(params).then(() => {
            $q.notify({ message: '取消选中操作成功', timeout: 3000 });
          });
        });
      }
    };

    const handleMouseDown = () => {
      longPressTimer.value = setTimeout(() => {
        isClick.value = false;
        emitter.emit('inform', {
          name: 'terminal-task',
          value: { isOpen: true, x: props.point.frX, y: props.point.frY, craneNo: props.craneNo },
        });
      }, 1300);
    };

    return {
      transform,
      handlePointClick,
      handlePointDblClick,
      getColor,
      getLabelLeft1,
      getLabelTop1,
      handleMouseDown,
    };
  },
});
</script>

<style lang="scss">
@font-face {
  font-family: 'Open-Sans-Bold';
  src: url('src/assets/fonts/AlibabaPuHuiTi-3-85-Bold.ttf') format('truetype');
}

.radar-point {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 2;
  .point-label {
    position: absolute;
    color: #000000;
    font-size: 16px;
    padding: 0px 4px;
    font-family: 'Open-Sans-Bold', sans-serif; /* 应用字体 */
    transition: transform 0.3s ease; /* 添加放大效果的过渡动画 */
    opacity: 1; /* 确保标签不会消失 */
    z-index: 10; /* 确保标签在前 */
    cursor: pointer;
    user-select: none;
    // left: 50%;
    transform: translateX(-50%);
  }
  &:hover {
    z-index: 12;
    border: 3px solid #f00;
    box-shadow: 0 0 10px 5px rgba(255, 255, 0, 0.5);
    .point-label {
      border: 3px solid #f00;
    }
  }
}

// .custom-dialog-bg .q-card .q-dialog-plugin {
//   background-image: url('@/assets/terminal/popup_bg.png') !important; /* 确保路径正确 */
//   background-size: cover !important; /* 调整背景图片大小 */
//   background-position: center !important; /* 设置背景图片位置 */
//   border-radius: 10px !important; /* 其他样式 */
//   padding: 20px !important; /* 其他样式 */
// }
</style>
